<div class="ui stackable grid">
<div class="three wide column" >
<div class="" style="padding:10px">
  <div class="ui ordered list" style="margin:0 auto!">
  <a class="item" *ngFor="let group_ of allDocsByProject.groups" >
    <span (click)="showApis(group_._id)">{{group_.name}}</span>
    <div class="item" *ngIf="group_.docs&& group_.docs.length > 0">
      <div class="list" >
        <a class="item" *ngFor="let api_ of group_.docs" (click)="showApi(api_._id)">{{api_.name}}</a>
      </div>
    </div>

  </a>
</div>
</div>
</div>

<div class="ten wide column">



<h3>{{proj.name}}</h3>
<div class="ui buttons">
  <button class="ui blue basic button" (click)="addGroup()">添加分组</button>
  <button class="ui green  basic button" (click)="addApi()">添加API</button>
</div>
<table class="ui orange table" >
  <thead>
    <tr>
      <th>组名</th>
      <th>描述</th>
      <th class="right aligned">
      </th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let group of groups;let i = index;">
      <td>{{group.name}}</td>
      <td>{{group.description}}</td>
      <td class="right aligned">
        <div class="ui small basic icon buttons">
          <button class="ui button" data-content="show api" (click)="gotoApis(group._id,i)"><i class="file text outline icon"></i></button>
          <button class="ui button" data-content="edit group" (click)="editGroup(group._id)"><i class="write icon"></i></button>
          <button class="ui button" data-content="delete group" (click)="delete(group._id,i)"><i class="trash icon"></i></button>
        </div>
      </td>
    </tr>

  </tbody>
</table>

<div class="ui basic modal">
  <i class="close icon"></i>
  <div class="header">
    Archive Old Messages
  </div>
  <div class="image content">
    <div class="image">
      <i class="archive icon"></i>
    </div>
    <div class="description">
      <p>Your inbox is getting full, would you like us to enable automatic archiving of old messages?</p>
    </div>
  </div>
  <div class="actions">
    <div class="two fluid ui inverted buttons">
      <div class="ui red basic inverted button">
        <i class="remove icon"></i>
        No
      </div>
      <div class="ui green basic inverted button" (click)="confirmDelete()">
        <i class="checkmark icon"></i>
        Yes
      </div>
    </div>
  </div>
</div>
</div>
</div>
